<template>
  <view class="content">
    <view class="grid">
      <view
        style="background-color: white;width: 100%; border-radius: 10px;border:2px solid;border-color:rgb(230,231,235);grid-column-start: 2;grid-column-end: 7;">
        <view style="padding: 20px 25px 0px 30px;">
          <text style="font-size: 1.1em;">当前机房</text>
        </view>
       
        <view
          style="width: 4%;border-radius: 10px;border:1px solid;border-color:rgb(230,231,235);padding: 5px 5px 5px 5px;font-size: 1em;position: relative;top: -30%;left: 90%;">
          <uni-icons style="padding: 0px 0px 0px 4px;" type="more-filled" size="20" @click="RefreshData"></uni-icons>
        </view>
        
        <uni-table ref="Items" :loading="loading" border stripe type="" emptyText="暂无更多数据">
          <uni-tr>
            <uni-th width="100" align="center">场景编号</uni-th>
            <uni-th width="100" align="center">查看</uni-th>
          </uni-tr>
          <uni-tr v-for="(item, index) in deviceList" :key="index">
            <uni-td>{{ item.id }}</uni-td>
            <uni-td>
              <view @click="Changedevice(index)" style="background-color: #f5f7fa;padding: 10px;border-radius: 15px;">
                <uni-icons type="info" size="15" style="position: relative;top: 0%;left: 0%;"></uni-icons>
              </view>
            </uni-td>
          </uni-tr>
        </uni-table>

      </view>
    </view>
   
    <view>
      <uni-popup ref="popup">
        <view style="background-color: white; padding: 10px;border-radius: 10px; height: 100%; width: 100%;">
          <uni-forms :modelValue="baseFormData">
            <uni-forms-item label="设备名称">
              <uni-easyinput v-model="baseFormData.name" placeholder="请输入姓名" />
            </uni-forms-item>
            <uni-forms-item label="设备备注">
              <uni-easyinput v-model="baseFormData.remarks" placeholder="请输入年龄" />
            </uni-forms-item>
            <uni-forms-item label="设备编号">
              <uni-easyinput v-model="baseFormData._ID" placeholder="请输入年龄" />
            </uni-forms-item>
            <uni-forms-item label="创建时间">
              <uni-datetime-picker type="datetime" v-model="baseFormData.datetimesingle" />
            </uni-forms-item>
            <button type="primary" @click="onSubmit">提交</button>
          </uni-forms>
        </view>
      </uni-popup>
    </view>

  </view>
</template>

<script>
import EchartsVue from '@/components/functions/Echarts.vue';
import ExcelJS from 'exceljs';
export default {
  components: {
    EchartsVue,
  },
  data() {
    return {
      value: -1,
      d_type: -1,
      no: -1,
      loading: false,
      deviceList: [],
      Scene: [],
      baseFormData: [],
      Datatype: [{
        value: 0,
        text: "图片"
      },
      {
        value: 1,
        text: "视频"
      },
      ],
      multipleValue: [1, 2, 3],
      range: [{
        "value": 0,
        "text": "篮球运动",
        "disable": true
      }, {
        "value": 1,
        "text": "足球运动",
      }, {
        "value": 2,
        "text": "游泳健身运动"
      }, {
        "value": 3,
        "text": "跑步有氧运动",
      }, {
        "value": 4,
        "text": "网球运动"
      }, {
        "value": 5,
        "text": "羽毛球运动"
      }, {
        "value": 6,
        "text": "乒乓球运动"
      }, {
        "value": 7,
        "text": "保龄球运动"
      }]
    }
  },
  props: {

  },
  created() {
    // uni.hideTabBar({});
    this.ws = uni.connectSocket({
      url: 'ws://192.168.1.111:8080/DeviceManager',
      // url: 'ws://localhost:8080/DeviceManager',
      //url: 'ws://192.168.1.101:8000/ErrorData',
      //url: 'ws://192.168.116.89:8000/ErrorData',
      success: () => {
        console.log('Webwsocket连接成功');
      }
    });
    this.ws.onOpen(() => {
      console.log('Webws连接已打开！');
    });
    this.ws.onMessage((e) => {
      let obj = JSON.parse(e.data);
      console.log(obj)
      switch (obj.topic) {
        case 'device':
          this.deviceList = obj.data
          break;
        case 'sence':
          this.Scene = obj.data
          break;
        default:
          break;
      }

    })
    this.ws.onClose(() => {
      console.log('Webws已关闭');
    });
  },
  beforeDestroy() {
    console.log('组件销毁');
    this.ws.close();
  },
  methods: {
    Changetype(ed) {
      this.d_type = ed;
      let t = this.no == -1 ? -1 : this.deviceList[this.no].value;
      this.ws.send({
        data: JSON.stringify({
          d_no: t,
          type: 'device',
          value: 'Data',
          d_type: this.d_type + 2,
        })
      })
    },

    Changedevice(e) {
      this.ws.send({
        data: JSON.stringify({
          d_no: e,
          type: 'device',
          value: 'Data',
        })
      })
      // uni.navigateTo({
      //   url: '/pages/page1',
      // })
      this.$emit('goToDataRoom','DataRoom')
    },

    onSubmit() {
      ws.send({
        data: JSON.stringify({
          device_name: baseFormData.value.name,
          remarks: baseFormData.value.remarks,
          ctime: baseFormData.value.datetimesingle,
          id: null,
          number: baseFormData.value._ID,
          type: type.value,
        })
      });
    },

    Delete(index) {
      page4Data.value.splice(index, 1);
      ws.send({
        data: JSON.stringify({
          id: page4Data.value[index].id,
          type: 1,
        })
      });
    },

    AddItem() {
      this.$refs.popup.open()
      // baseFormData.value.remarks = '';
      // baseFormData.value.datetimesingle = '';
      // baseFormData.value.name = '';
      // baseFormData.value._ID = '';
      // type = ref(3);
      // popup.value.open('bottom');
    },

    Revise(index) {
      baseFormData.value.remarks = page4Data.value[index].rmaker;
      baseFormData.value.datetimesingle = page4Data.value[index].date;
      baseFormData.value.name = page4Data.value[index].unit;
      baseFormData.value._ID = page4Data.value[index].number;
      type = ref(5);
      popup.value.open('bottom');
    },

    RefreshData() {
      console.log('refresh');
      page4Data.value = []
      ws.send({
        data: JSON.stringify({
          type: 10,
        })
      });
    },

    IdFind() {
      console.log(input.value);
      ws.send({
        data: JSON.stringify({
          type: 4,
          value: input.value,
        })
      });
      page4Data.value = []
    },

    ExportWorlBook() {

      const workbook = new ExcelJS.Workbook();
      const worksheet = workbook.addWorksheet('Sheet 1'); // 创建一个工作表

      // 设置列标题
      worksheet.columns = [{
        header: '姓名',
        key: 'name',
        width: 20
      },
      {
        header: '年龄',
        key: 'age',
        width: 10
      },
      {
        header: '邮箱',
        key: 'email',
        width: 30
      }
      ];

      // 准备数据并添加到工作表中
      const data = [{
        name: 'Alice',
        age: 25,
        email: 'alice@example.com'
      },
      {
        name: 'Bob',
        age: 30,
        email: 'bob@example.com'
      },
      {
        name: 'Charlie',
        age: 35,
        email: 'charlie@example.com'
      }
      ];

      worksheet.addRows(data); // 添加数据行

      // 创建一个 Blob 并下载文件
      workbook.xlsx.writeBuffer().then((buffer) => {
        const blob = new Blob([buffer], {
          type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
        });
        const link = document.createElement('a');
        link.href = URL.createObjectURL(blob);
        link.download = 'example.xlsx';
        link.click(); // 模拟点击下载文件
      });

    }
  }
}
</script>

<style scoped>
.content{
  width: 100%;
  /* padding: 20rpx; */
}
.grid {
  padding: 20rpx;
  background-color: transparent;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
}
</style>